<script setup lang="ts">
/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
defineOptions({
	name: "YzBill",
	inheritAttrs: false,
});
import {
	getBillColumnPage
} from "@/api/yzBill";

import {YzBillQuery, YzBillPageVO} from "@/api/yzBill/types";

const queryFormRef = ref(ElForm); // 查询表单

const loading = ref(false);
const ids = ref([]);
const total = ref(0);
const monthValue = ref('')

const queryParams = reactive<YzBillQuery>({
	pageNum: 1,
	pageSize: 10,
});
const billColumnList = ref<YzBillPageVO[]>();



/**
 * 查询
 */
function handleQuery() {
	queryParams.billMonth = monthValue.value
	loading.value = true;
	getBillColumnPage(queryParams)
	.then(({data}) => {
		billColumnList.value = data.list;
		total.value = data.total;
	})
	.finally(() => {
		loading.value = false;
	});
}

/** 重置查询 */
function resetQuery() {
	queryParams.pageNum = 1;
	handleQuery();
}

onMounted(() => {
	let now = new Date()
	let month = now.getMonth()
	if (month < 9){
		monthValue.value = now.getFullYear() + '0' + (now.getMonth() + 1) + ''
	}	else {
		monthValue.value = now.getFullYear() + '' + (now.getMonth() + 1) + ''
	}
	handleQuery(); // 初始化列表数据
});
</script>

<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col>
				<div class="search-container">
				  <el-form ref="queryFormRef" :model="queryParams" :inline="true">
					  <el-form-item label="账单月份">
						  <el-date-picker
								  v-model="monthValue"
								  type="month"
								  value-format="YYYYMM"
								  :editable="false"
								  :clearable="false"
								  placeholder="选择月份"
						  />
					  </el-form-item>
						<el-form-item label="业务单号" prop="businessNo">
							<el-input
							v-model="queryParams.businessNo"
							placeholder="请输入业务单号"
							clearable
							style="width: 200px"
							@keyup.enter="handleQuery"
							/>
						</el-form-item>
					  <el-form-item label="支付流水号" prop="payNo">
						  <el-input
								  v-model="queryParams.payNo"
								  placeholder="请输入支付流水号"
								  clearable
								  style="width: 200px"
								  @keyup.enter="handleQuery"
						  />
					  </el-form-item>
						<el-form-item label="关联单号" prop="linkNumber">
							<el-input
									v-model="queryParams.linkNumber"
									placeholder="请输入关联单号"
									clearable
									style="width: 200px"
									@keyup.enter="handleQuery"
							/>
						</el-form-item>
			  		<el-form-item>
							<el-button type="primary" @click="resetQuery"
							><i-ep-search />搜索</el-button
							>
							<el-button @click="resetQuery">
							<i-ep-refresh />
							重置</el-button
							>
						</el-form-item>
				  </el-form>
				</div>

				<el-card shadow="never">

					<el-table
				  		size="small"
			  			:height="billColumnList && billColumnList.length > 0 ? 650 : 150"
							v-loading="loading"
							:data="billColumnList"
							border
					>
						<el-table-column
								label="类型"
								align="center" show-overflow-tooltip
								prop="billType"
								width="100"
						/>
						<el-table-column
								label="名称"
								width="100"
								align="center" show-overflow-tooltip
								prop="productName"
						/>
						<el-table-column
								label="业务单号"
								width="120"
								align="center" show-overflow-tooltip
								prop="businessNo"
						/>

						<el-table-column
								label="支付流水号"
								width="100"
								align="center" show-overflow-tooltip
								prop="payNo"
						/>

						<el-table-column
								label="关联单号"
								width="120"
								align="center" show-overflow-tooltip
								prop="linkNumber"
						/>
						<el-table-column
								label="交易来源地"
								align="center" show-overflow-tooltip
								prop="sourcePlace"
								width="80"
						/>
						<el-table-column
								label="账务主体"
								align="center" show-overflow-tooltip
								prop="billCompany"
								width="80"
						/>
						<el-table-column
								label="账户"
								align="center" show-overflow-tooltip
								prop="account"
								width="80"
						/>
						<el-table-column
								label="收入(元)"
								align="center" show-overflow-tooltip
								prop="incomeAmount"
								width="100"
						/>
						<el-table-column
								label="支出(元)"
								align="center" show-overflow-tooltip
								prop="payAmount"
								width="100"
						/>
						<el-table-column
								label="余额(元)"
								align="center" show-overflow-tooltip
								prop="restAmount"
								width="100"
						/>
						<el-table-column
								label="支付方式"
								align="center" show-overflow-tooltip
								prop="payType"
								width="80"
						/>
						<el-table-column
								label="交易对手"
								align="center" show-overflow-tooltip
								prop="tradeObj"
								width="80"
						/>
						<el-table-column
								label="渠道"
								align="center" show-overflow-tooltip
								prop="channel"
								width="80"
						/>
						<el-table-column
								label="下单时间"
								align="center" show-overflow-tooltip
								prop="orderTime"
								width="140"
						/>
						<el-table-column
								label="入账时间"
								align="center" show-overflow-tooltip
								prop="incomeTime"
								width="140"
						/>
						<el-table-column
								label="操作人"
								align="center" show-overflow-tooltip
								prop="op"
								width="80"
						/>
						<el-table-column
								label="附加信息"
								align="center" show-overflow-tooltip
								prop="attach"
								width="80"
						/>
						<el-table-column
								label="备注"
								align="center" show-overflow-tooltip
								prop="remark"
								width="80"
						/>
						<el-table-column
								label="来源"
								align="center" show-overflow-tooltip
								prop="sourceText"
								width="80"
						/>
					</el-table>

					<pagination
							v-if="total > 0"
							v-model:total="total"
							v-model:page="queryParams.pageNum"
							v-model:limit="queryParams.pageSize"
							@pagination="handleQuery"
					/>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
